body {
  padding: 2vw;
  text-align: center
}

ul {
  margin: 20px 0;
  padding: 0;
}

li,
p,
span {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: orange;
  margin: 5px;
  line-height: 50px;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
}

// first($num,$type:false)
// from: https://github.com/W3cplus/SassMagic/blob/master/src/mixins/_selector.scss
@mixin first($num, $type: false) {
  @if ($num ==1) and ($type == true) {
    &:first-of-type{
      @content;
    }
  }
  @if ($num == 1) and ($type == false) {
    &:first-child{
      @content;
    }
  }
  @if ($num !=1) and ($type == true) {
    &:nth-of-type(-n + #{$num}){
      @content;
    }
  }
  @if ($num != 1) and ($type == false) {
    &:nth-child(-n + #{$num}){
      @content;
    }
  }
}

li{
  @include first(5,false) {
    background: #f36;
  }
}
p {
  @include first(3,true){
    background: #893;
  }
}

span {
  @include first(1,true){
    background: #e89;
  }
}